@charset "utf-8";
/* ============================================================
   theme_v2.css —— 全站设计令牌 + 配色统一层（PC + 手机共用）
   2026-09-18 新增。加载顺序：style.css / style_pc_add.css
   （或 style_m.css / style_m_add.css）之后，位于 meta.html 末尾。

   ------------------------------------------------------------
   设计令牌（唯一色彩来源，改色只改这里）
   ------------------------------------------------------------
   深色底      --c-deepest  #000000   顶栏 / 页脚（纯黑）
               --c-deep     #0a0a0a   Banner 之外的深色区块
               --c-deep-2   #1c1c1c   深色区块上的分隔
   点缀色（红）--c-brand    #e11d48   角标 / 图标 / 链接 / 当前项 / hover
               --c-brand-dk #b8153a   按下态 / 深红
               --c-brand-05 #fdf1f4   浅红底块
               --c-brand-10 #f9d9e2   浅红描边 / 标签
   强调色（红）--c-accent   #e11d48   价格数字 / 主按钮底（与点缀色同源）
               --c-accent-dk #b8153a  白底小字高亮 / 按钮按下态
   文字        --c-ink      #141414   标题
               --c-text     #4a4a4a   正文
               --c-muted    #757575   次要信息（白底 4.6:1，达到 WCAG AA）
               --c-line     #e8e8e8   边框 / 分隔线
               --c-bg       #ffffff   页面底
               --c-bg-alt   #f7f7f7   区块浅底

   ⚠️ 维护约定
   1) 新增样式一律用 var(--c-xxx)，不要再写死十六进制色值
   2) 全站不得再出现：蓝色系（#15319f/#2b3aa8/#0000EE）、旧品牌粉
      （#eb2467/#d6336c/#c61e43）、琥珀/黄色（#e11d48/#ffde00）——
      这些已在本次统一中并入上面的令牌
   3) 本文件只改「颜色 / 描边 / 圆角 / 阴影 / 过渡」，不改尺寸与布局，
      避免影响 style.css 的既有排版
   4) 历史文件里大量形如 var(--c-brand,#e11d48) 的行内回退值，语义是
      「本文件加载失败时的近似兜底」，**不必与上面的令牌逐字同步**。
      真正生效的永远是本文件的 :root（它 100% 会加载）。改色只改 :root。
   ============================================================ */

/* ==================== 1. 设计令牌 ==================== */
:root {
  /* 深色底（纯黑，与页脚一致） */
  --c-deepest: #000000;
  --c-deep: #0a0a0a;
  --c-deep-2: #1c1c1c;

  /* 点缀色（红） */
  --c-brand: #e11d48;
  --c-brand-dk: #b8153a;
  --c-brand-05: #fdf1f4;
  --c-brand-10: #f9d9e2;

  /* 强调色（与点缀同源，避免两个彩色互相打架） */
  --c-accent: #e11d48;
  --c-accent-dk: #b8153a;

  /* 文字与线条（去掉原来的青绿调，改纯中性灰） */
  --c-ink: #141414;
  --c-text: #4a4a4a;
  --c-muted: #757575;
  --c-line: #e8e8e8;
  --c-bg: #ffffff;
  --c-bg-alt: #f7f7f7;

  /* 圆角与阴影 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --sh-1: 0 2px 8px rgba(0, 0, 0, 0.06);
  --sh-2: 0 10px 26px rgba(0, 0, 0, 0.1);
  --ease: 0.25s ease;
}

/* ==================== 2. 全局 ==================== */
/* 关键：原站点大量 <a> 未设色，浏览器默认 #0000EE 蓝色非常刺眼，这里统一定义 */
a,
a:link,
a:visited {
  color: var(--c-text, #4a4a4a);
  text-decoration: none;
}
a:hover,
a:active,
a:focus {
  color: var(--c-brand, #e11d48);
}
/* 按钮类链接不受上面影响（由各自规则覆盖） */
::selection {
  background: var(--c-brand, #e11d48);
  color: #fff;
}
h1,
h2,
h3,
h4 {
  color: var(--c-ink, #141414);
}

/* ==================== 3. 顶栏 ==================== */
.menu_bg,
.menu_bg_t {
  background-color: var(--c-deepest, #000000);
}
.menu_bg_t {
  border-color: rgba(255, 255, 255, 0.08);
}
.menu_bg_top {
  background-color: #111111;
}
.menu_t,
.menu_t_l {
  color: rgba(255, 255, 255, 0.72);
}
.menu_r ul li a {
  color: rgba(255, 255, 255, 0.9);
}
.menu_r ul li a:hover,
.menu_r ul li:hover a,
.menu_r ul li:hover span,
.menu_r ul li span:hover {
  color: var(--c-accent, #e11d48);
}

/* ==================== 3a. 公告条收起（配合 static/js/announce.js） ====================
   收起状态一律用 body.ann-closed 选择：lzl.js 滚动时会重写 #menu_bg 的
   className，挂在 #menu_bg 上的 class 会被抹掉。
   body 的 padding-top 必须跟着从 100px 收到 66px（= .menu 高度），
   不然收起后顶部会空出 34px 的缝。
   -------------------------------------------------------------------- */
.menu_t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
}
.menu_t_l {
  float: none;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ann-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease), transform var(--ease);
}
.ann-close svg {
  width: 10px;
  height: 10px;
  display: block;
}
.ann-close:hover {
  background: var(--c-brand, #e11d48);
  color: #fff;
  transform: rotate(90deg);
}
.menu_bg_top {
  overflow: hidden;
  transition: height 0.34s ease, opacity 0.34s ease;
}
body {
  transition: padding-top 0.34s ease;
}
body.ann-closed {
  padding-top: 66px;
}
body.ann-closed .menu_bg_top {
  height: 0;
  opacity: 0;
}
/* sessionStorage 已记住关闭状态时，进页面不要再播一次收起动画 */
.no-anim {
  transition: none !important;
}

/* ==================== 3b. 下拉菜单（一行两列 + 小箭头） ====================
   2026-09-18 改版：
   1) 原来 :before 是个 60×30px 的实心三角（border-width:0 30px 30px），
      又大又扎眼 —— 换成 12px 旋转方块做的小箭头，居中对齐到导航项
   2) 子栏目最多有 9 项，单列太长会顶出屏幕 —— 改成一行两列
   -------------------------------------------------------------------- */
.menu_h {
  width: 520px;
  padding: 16px 26px 18px 26px;
  left: 50%;
  margin-left: -260px; /* 水平居中于当前一级导航项 */
  background: var(--c-bg, #fff);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}
.menu_h:before {
  width: 12px;
  height: 12px;
  border-width: 0;
  border-color: transparent;
  border-radius: 2px;
  background: var(--c-bg, #fff);
  transform: rotate(45deg);
  top: -5px;
  left: 50%;
  margin-left: -6px;
}
.menu_r ul li:hover .menu_h {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
}
.menu_h li a {
  width: auto;
  padding: 12px 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-ink, #141414) !important;
  border-bottom: 1px solid var(--c-line, #e8e8e8);
}
.menu_h li a:hover {
  color: var(--c-brand, #e11d48) !important;
  border-color: var(--c-brand, #e11d48);
}
/* 窄屏下把下拉收进视口 */
@media (max-width: 1250px) {
  .menu_h {
    left: auto;
    right: -20px;
    margin-left: 0;
  }
  .menu_h:before {
    left: auto;
    right: 60px;
  }
}

/* ==================== 4. 页脚（纯黑 + 全白字，压住页面下沿避免头重脚轻） ====================
   2026-09-18 改版：
   1) 底色改纯黑 #000（令牌 --c-deepest）
   2) 分组标题（<ul> 的直接子级 <a>，无 href）加粗 + 纯白 —— 注意原来这些
      标题命中的是 .bottom_c ul a（#666 灰），跟子链接一个色，看不出层级
   3) 全部文字改纯白（原来是 rgba(255,255,255,.62) 半透明白）
   -------------------------------------------------------------------- */
.bottom,
.bottom_m {
  background-color: var(--c-deepest, #000000);
}
.bottom_c ul > a {
  display: block;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}
.bottom_t {
  background: var(--c-deep, #0a0a0a);
}
.bottom_t ul li a:hover {
  color: var(--c-accent, #e11d48);
}
.bottom_c ul span {
  color: #ffffff;
}
.bottom_c ul li a,
.bottom_c h3,
.bottom_b,
.bottom_b a,
.bottom_b div,
.bottom-shengming .container {
  color: #ffffff;
}
.bottom_c ul li a:hover,
.bottom_b a:hover {
  color: var(--c-accent, #e11d48);
}
.bottom_b {
  border-top-color: rgba(255, 255, 255, 0.14);
}
/* 页脚"网站地图"链接：弱化显示，避免抢视觉（hover 时稍微提亮） */
.bottom_b a.footer-sitemap-link,
.bottom_m_b a.footer-sitemap-link {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  font-size: 12px;
}
.bottom_b a.footer-sitemap-link:hover,
.bottom_m_b a.footer-sitemap-link:hover {
  color: rgba(255, 255, 255, 0.65);
}
.bottom_c .qq_b {
  background: var(--c-brand, #e11d48);
}
.bottom_c .qq_b:hover {
  background: var(--c-accent-dk, #b8153a);
  color: #fff;
}
.bottom-shengming {
  background-color: var(--c-deep, #0a0a0a);
}
.hkweb10 {
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* ==================== 5. 面包屑（2026-09-18 改版：更矮、更小、去粗） ====================
   原来：.menu_link 高 60px、字体继承 body 的 16px、「当前位置：」用 <b> 加粗，
         整体又高又大又重。
   现在：高度交给上下 padding（约 46px），字体 13px，标签字重 400，白底无边线。
   2026-09-19l：去掉面包屑下边线与 .title_n 灰色长线，仅保留标题红色下划线，
   消除「面包屑线 + 标题灰线 + 红下划线」三层横线叠在一起的「切香肠」观感。
   「当前位置」的字重同时兜了两层：模板里已从 <b> 换成 <span class="loc-label">，
   这里再补一条 #location b 的兼容规则，避免别的入口漏改。
   -------------------------------------------------------------------- */
.menu_link,
.menu_link_f9,
.menu_link_f5 {
  height: auto;
  padding: 14px 0;
  background-color: var(--c-bg, #fff);
  border-bottom: 0;
  box-sizing: border-box;
}
.menu_link ul {
  height: auto;
  line-height: 18px;
  font-size: 13px;
  color: var(--c-muted, #757575);
}
#location {
  height: auto;
  line-height: 18px;
  font-size: 13px;
  color: var(--c-muted, #757575);
}
#location b,
#location strong,
.loc-label {
  font-weight: 400;
  color: var(--c-muted, #757575);
}
.menu_link a {
  color: var(--c-text, #4a4a4a);
}
.menu_link a:hover {
  color: var(--c-brand, #e11d48);
}

.title_n {
  border-bottom: 0;
}

.title_n h1,
.title_n h2,
.title_n h3 {
  color: var(--c-ink, #141414);
}
.title_n p {
  color: var(--c-muted, #757575);
}
.index_list {
  border-color: var(--c-line, #e8e8e8);
  border-radius: var(--r-md);
  background: var(--c-bg, #fff);
  transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.index_list:hover {
  border-color: var(--c-brand-10, #f9d9e2);
  box-shadow: var(--sh-2);
}
.index_list .h2 {
  color: var(--c-ink, #141414);
}
.index_list ul {
  color: var(--c-muted, #757575);
}
.index_about {
  background-color: var(--c-bg-alt, #f7f7f7);
}
.index_about h2 {
  color: var(--c-ink, #141414);
}
.index_about p {
  color: var(--c-text, #4a4a4a);
}
.index_main_new1 ul {
  color: var(--c-text, #4a4a4a);
}
.index_main_new1 ul span {
  color: var(--c-brand, #e11d48);
}
.desktop_one {
  border-bottom-color: var(--c-line, #e8e8e8);
}
.desktop_one ul {
  color: var(--c-text, #4a4a4a);
}
.desktop_one ul p {
  color: var(--c-ink, #141414);
}
/* 新闻列表日期块 + 标题悬停 */
.index_main_new2_n {
  border-bottom-color: var(--c-line, #e8e8e8);
}
.index_main_new2_n ul {
  background-color: var(--c-brand-05, #fdf1f4);
  color: var(--c-brand, #e11d48);
}
.index_main_new2_n ul p {
  color: var(--c-brand, #e11d48);
}
.index_main_new2_n ss {
  color: var(--c-ink, #141414);
}
.index_main_new2_n span {
  color: var(--c-muted, #757575);
}
.index_main_new2_n:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
  border-radius: var(--r-md);
}
.index_main_new2_n:hover ss {
  color: var(--c-brand, #e11d48);
}
.wap_index_news_list a {
  color: var(--c-text, #4a4a4a);
  border-bottom: 1px solid var(--c-line, #e8e8e8);
}
.wap_index_news_list a:hover ss {
  color: var(--c-brand, #e11d48);
}
.wap_index_news_list span {
  color: var(--c-muted, #757575);
}
.wap_about span,
.main_n .wap_about span {
  color: var(--c-accent-dk, #b8153a);
}

/* ==================== 7. 分页 ==================== */
.pagination-centered li a {
  color: var(--c-text, #4a4a4a);
}
.pagination-centered li a:hover {
  background: var(--c-brand, #e11d48);
  color: #fff;
}
.pagination-centered .active a {
  background: var(--c-brand, #e11d48);
  color: #fff;
}

/* ==================== 8. 列表页 / 详情页 ==================== */
.news_list {
  border-color: var(--c-line, #e8e8e8);
  border-radius: var(--r-md);
}
.news_list_b ss,
.news_list_b a {
  color: var(--c-ink, #141414);
}
.news_list_b ss:hover,
.news_list_b a:hover {
  color: var(--c-brand, #e11d48);
}
.news_l .news_list:hover {
  box-shadow: var(--sh-2);
}
.news_article_title {
  color: var(--c-ink, #141414);
}
.news_article_desc,
.news_article_desc a {
  color: var(--c-muted, #757575);
}
.news_article_desc a:hover {
  color: var(--c-brand, #e11d48);
}
.news_article_list a:hover,
.news_article_list a:hover ss {
  color: var(--c-brand, #e11d48);
}
.page_up p b {
  color: var(--c-ink, #141414);
}
.page_up a:hover {
  color: var(--c-brand, #e11d48);
}
#MyContent {
  color: var(--c-text, #4a4a4a);
}
#MyContent a {
  color: var(--c-brand, #e11d48);
}
#MyContent a:hover {
  color: var(--c-brand-dk, #b8153a);
}
.info_tit_tui {
  color: var(--c-accent-dk, #b8153a);
}
.info_text {
  color: var(--c-text, #4a4a4a);
}
.server_help_n p a {
  color: var(--c-brand, #e11d48);
}

/* ==================== 9. Banner（内页共用） ====================
   2026-09-18 二次调整：由「深青绿渐变」改为「浅色底」。
   理由（用户反馈 + 实测）：
   · 深底 banner 是首屏最重的一块，与下方白色内容形成强烈断层 →「头重脚轻」
   · 浅底后整页重心下移，banner 只做「一句主张 + 两个按钮」的引导条
   配套改了 banner.html 里插画的 filter：去色成深色渲染图，
   彻底干掉原图上的霓虹蓝（那是全页最后的蓝色来源）。
   深色令牌 --c-deep / --c-deep-2 仍保留，供页脚等深色区块使用。
   -------------------------------------------------------------------- */
.banner {
  background: linear-gradient(180deg, var(--c-brand-05, #fdf1f4) 0%, var(--c-bg, #fff) 100%);
  border-bottom: 1px solid var(--c-line, #e8e8e8);
}
.banner_desc h2,
.banner_desc_new h2 {
  color: var(--c-ink, #141414);
}
.banner_desc ul,
.banner_desc_new ul {
  color: var(--c-text, #4a4a4a);
}
.banner_desc a {
  color: var(--c-brand, #e11d48);
  border-color: var(--c-brand-10, #f9d9e2);
  border-radius: var(--r-sm);
  background: var(--c-bg, #fff);
}
.banner_desc a:hover {
  color: #fff;
  border-color: var(--c-brand, #e11d48);
  background: var(--c-brand, #e11d48);
}
.banner-box .li .index,
.banner-box .bar {
  background-color: var(--c-accent, #e11d48);
}

/* ==================== 9b. Banner 重构（.banner-v2） ====================
   挂载于 banner.html（首页 + 产品页 fw.html 共用）。
   挂在 .banner-v2 下面，所以 list / search / ListShow / ChanPinShow
   这 4 个用 .banner_desc_new 的页面完全不受影响。
   顺带修掉老问题：原 .banner_desc 用 left:50% + margin-left:-585px 定位，
   视口窄于 1200px 时文字会被挤出屏幕左侧（表现为标题左边被切掉）。
   -------------------------------------------------------------------- */
.banner-v2 {
  height: auto;
  /* ⚠️ 不能删：祥云图层现在比 banner 大且刻意向右/向下出血，
     不裁切会溢到下方「热门地区」内容区上。 */
  overflow: hidden;
}
/* ⚠️ 不能用 flex 给 #greenDiv 做垂直居中：lzl.js 的 window.onload 里有
   $('#greenDiv').css('display','block')，内联样式会盖掉 CSS 的 display，
   flex 直接失效。这里改用上下 padding 控高，JS 动不到 padding，稳定。 */
.banner-v2 #greenDiv {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  padding: 72px 0 78px 0;
  box-sizing: border-box;
}
.banner-v2 .banner_desc {
  position: relative;
  left: auto;
  top: auto;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  height: auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.banner-v2 .banner_desc h2 {
  margin-top: 0;
  height: auto;
  font-size: 40px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 1px;
}
.banner-v2 .bn-sub {
  margin-top: 14px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text, #4a4a4a);
}
.banner-v2 .bn-tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.banner-v2 .bn-tags span {
  display: inline-block;
  padding: 5px 13px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text, #4a4a4a);
  border: 1px solid var(--c-line, #e8e8e8);
  border-radius: 999px;
  background: var(--c-bg, #fff);
}
.banner-v2 .bn-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.banner-v2 .bn-btn {
  display: inline-block;
  min-width: 140px;
  height: 44px;
  line-height: 42px;
  padding: 0 22px;
  text-align: center;
  font-size: 15px;
  border-radius: var(--r-sm);
  box-sizing: border-box;
  transition: all var(--ease);
  border: 1px solid transparent;
}
.banner-v2 .bn-btn--main {
  background: var(--c-brand, #e11d48);
  color: #fff;
  border-color: var(--c-brand, #e11d48);
  font-weight: 600;
}
.banner-v2 .bn-btn--main:hover {
  background: var(--c-brand-dk, #b8153a);
  border-color: var(--c-brand-dk, #b8153a);
  color: #fff;
}
.banner-v2 .bn-btn--ghost {
  color: var(--c-text, #4a4a4a);
  border-color: var(--c-line, #e8e8e8);
  background: var(--c-bg, #fff);
}
.banner-v2 .bn-btn--ghost:hover {
  color: var(--c-brand, #e11d48);
  border-color: var(--c-brand, #e11d48);
  background: var(--c-brand-05, #fdf1f4);
}
/* 右侧祥云天空：呼应「新沃云」品牌名。
   2026-09-19 v6（用户反馈：左边再飘点云过去 / 左上角与右下角是空白要填满 /
   云不该全朝一个方向）：
   1) 铺满全宽：两层画布都做成 1900 宽（近景 1900×900、远景 1900×880），
      按 CSS 宽度 1:1 排布，云从 banner 最左一直铺到最右，左上/右下角都补上云与云团。
   2) 不同朝向：新加的云用「中心定位 + rotate」写法，倾角 -22°~+24° 各不相同，
      像各自在飘；原有云姿态未动。
   3) 浓淡仍分层：描边 #f8cfdb→#f1a6bc（近）/ #fadbe4→#f4b8c9（远），
      每朵 0.22–0.6，层总闸 --c-cloud-alpha（近 .8 / 远 .66）
      × mask 左低右高的缓坡 → 左边淡、右边浓，文案后面只是层影子。
   4) 定位用 bottom 而不是 top：宽度变化时图片高度跟着变，bottom 锚定下边缘不用重算 top。
   ⚠️ 选择器必须带 #greenDiv：style.css 里有 #greenDiv img{width:100%}，
   纯 class 选择器压不住，祥云会被撑成全宽。
   调参：--c-tilt 角度；--c-cloud-alpha 浓淡；--c-cloud-mask 渐隐范围；
        right/bottom 出血量；width 尺寸 */
.banner-v2 #greenDiv .bn-clouds {
  --c-tilt: -9deg;
  --c-cloud-alpha: 0.5;
  /* 左淡右浓：越靠左越淡、越靠近文案越淡（用户 2026-09-19 要求），
     最左归零避免硬切，到 95% 才满格。想调范围就改百分比。 */
  --c-cloud-mask: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.08) 5%,
      rgba(0, 0, 0, 0.18) 20%,
      rgba(0, 0, 0, 0.3) 35%,
      rgba(0, 0, 0, 0.42) 50%,
      rgba(0, 0, 0, 0.58) 62%,
      rgba(0, 0, 0, 0.8) 74%,
      rgba(0, 0, 0, 0.95) 86%,
      #000 95%);
  position: absolute;
  right: clamp(-120px, -4vw, -60px);
  /* bottom 随宽度补偿：宽度变化时若 bottom 固定，可见带会被压低/抬高，
     某个角就会空。 192.5px - 0.1243×宽度 → 可见带永远填满 banner 上下缘。
     （系数是拿画布 1900×900、旋转 -9°、锚点右下角 推出来的，改画布要重算） */
  bottom: calc(192.5px - 0.1243 * clamp(1900px, 100vw, 2600px));
  /* 至少 1900px = SVG 画布宽度（1:1，云朵尺寸才与设计一致），
     超宽屏再随 vw 放大，保证左侧也有云 */
  width: clamp(1900px, 100vw, 2600px);
  max-width: none;
  height: auto;
  margin: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--c-cloud-alpha);
  -webkit-mask-image: var(--c-cloud-mask);
  mask-image: var(--c-cloud-mask);
  transform-origin: 100% 100%; /* 以图片右下角为旋转锚点 */
  will-change: transform;
}
/* 近景云：最大最清楚，铺住 banner 右侧与右上角 */
.banner-v2 #greenDiv .bn-clouds--front {
  animation: bn-cloud-float-a 7.5s ease-in-out infinite;
}
/* 远景云：更小更淡、铺得更宽、周期更长、负延迟错开相位，两层永不同步 → 视差 */
.banner-v2 #greenDiv .bn-clouds--back {
  --c-tilt: -6deg;
  --c-cloud-alpha: 0.42;
  --c-cloud-mask: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.07) 5%,
      rgba(0, 0, 0, 0.16) 20%,
      rgba(0, 0, 0, 0.27) 35%,
      rgba(0, 0, 0, 0.38) 50%,
      rgba(0, 0, 0, 0.54) 62%,
      rgba(0, 0, 0, 0.78) 74%,
      rgba(0, 0, 0, 0.94) 86%,
      #000 95%);
  right: clamp(-90px, -2.5vw, -30px);
  /* 系数同近景层，只是画布高 880、旋转 -6°，所以略小 */
  bottom: calc(192.5px - 0.10816 * clamp(1900px, 100vw, 2600px));
  width: clamp(1900px, 100vw, 2600px);
  animation: bn-cloud-float-b 10s ease-in-out -4.2s infinite;
}
/* transform 顺序：先旋转定姿态，再 translate 沿云带斜向漂移 */
@keyframes bn-cloud-float-a {
  0%, 100% { transform: rotate(var(--c-tilt)) translate3d(0, 0, 0); }
  50%      { transform: rotate(var(--c-tilt)) translate3d(3px, -7px, 0); }
}
@keyframes bn-cloud-float-b {
  0%, 100% { transform: rotate(var(--c-tilt)) translate3d(0, 0, 0); }
  50%      { transform: rotate(var(--c-tilt)) translate3d(-4px, -10px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .banner-v2 #greenDiv .bn-clouds--front,
  .banner-v2 #greenDiv .bn-clouds--back {
    animation: none;
    transform: rotate(var(--c-tilt));
  }
}
.banner-v2 .banner_desc {
  z-index: 1;
}
@media (max-width: 1250px) {
  .banner-v2 .banner_desc {
    padding-left: 34px;
    padding-right: 34px;
  }
  .banner-v2 #greenDiv .bn-clouds {
    right: -60px;
    bottom: calc(192.5px - 0.1243 * clamp(1200px, 100vw, 1400px));
    width: clamp(1200px, 100vw, 1400px);
  }
  /* 窄屏两层取同宽，避免远景左缘多出来一截 */
  .banner-v2 #greenDiv .bn-clouds--back {
    right: -30px;
    bottom: calc(192.5px - 0.10816 * clamp(1200px, 100vw, 1400px));
    width: clamp(1200px, 100vw, 1400px);
  }
}
/* 1100px 以下右侧空间不足以容纳云群且不压标签，直接隐藏；
   真实手机另由 style_m.css 的 .m_no 双重保险 */
@media (max-width: 1100px) {
  .banner-v2 #greenDiv .bn-clouds {
    display: none;
  }
}
@media (max-width: 900px) {
  .banner-v2 .banner_desc {
    padding: 0 24px;
  }
  /* 覆盖 style_m_add.css 里 #greenDiv 的绝对定位/定高写法 */
  .banner-v2,
  .banner-v2 #greenDiv {
    height: auto;
  }
  .banner-v2 #greenDiv {
    display: block;
    padding: 28px 0 32px 0;
  }
  .banner-v2 .banner_desc h2 {
    font-size: 22px;
    line-height: 1.32;
  }
  .banner-v2 .bn-sub {
    margin-top: 9px;
    font-size: 12.5px;
    line-height: 1.65;
  }
  .banner-v2 .bn-tags {
    margin-top: 12px;
    gap: 7px;
  }
  .banner-v2 .bn-tags span {
    font-size: 11.5px;
    padding: 4px 9px;
  }
  .banner-v2 .bn-cta {
    margin-top: 20px;
    gap: 10px;
  }
  .banner-v2 .bn-btn {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    line-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }
}

/* ==================== 10. 手机端 ==================== */
.top_m_l,
.top_m_r {
  color: var(--c-accent, #e11d48);
}
.menu_m_head {
  background: linear-gradient(135deg, var(--c-deepest, #000000) 0%, var(--c-deep, #0a0a0a) 100%);
}
.menu_m_head_t:before {
  color: var(--c-accent, #e11d48);
}
.menu_m_head_x:active {
  color: var(--c-accent, #e11d48);
}
.menu_m_li a {
  color: var(--c-ink, #141414);
}
.menu_m_li a:before {
  background-color: var(--c-brand, #e11d48);
}
.menu_m_li a:active,
.menu_m_li.expand > a {
  color: var(--c-brand, #e11d48);
}
.menu_m_n_ul {
  background-color: var(--c-brand-05, #fdf1f4);
  border-color: var(--c-line, #e8e8e8);
}
.menu_m_n_ul li a:before {
  color: var(--c-brand, #e11d48);
  opacity: 0.5;
}
.menu_m_li.expand i.menu_m_i {
  color: var(--c-brand, #e11d48);
}
/* 手机端首页卡片网格 */
.index_grid .index_list,
.index_grid .desktop_one {
  border-color: var(--c-line, #e8e8e8);
  background: var(--c-bg, #fff);
  border-radius: var(--r-md);
}
.index_grid .index_list .h2,
.index_grid .index_list a .h2,
.index_grid .index_list h4,
.index_grid .desktop_one p {
  color: var(--c-ink, #141414);
}
.index_grid .index_list ul,
.index_grid .desktop_one ul {
  color: var(--c-muted, #757575);
}
.index_grid .index_list a:active .h2 {
  color: var(--c-brand, #e11d48);
}
/* 手机端页脚（同样纯黑 + 全白） */
.bottom_m_t {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.bottom_m_t ul li a {
  color: #ffffff;
  font-weight: 700;
}
.bottom_m_b,
.bottom_m_b div {
  color: #ffffff;
}